<template>
	<view class="slogan">
		<view class="slogan-content">
			<image src="/static/img/bg.jpg" class="slogan-bg" mode="widthFix"></image>
			<!-- 头部 -->
			<view class="header">
				<image src="/static/img/title.png" style="width: 100%;" mode="widthFix"></image>
				<view class="header-btn">
					<view class="active-rule item" @click="openRule">
						<image src="/static/img/active-rule.png"></image>
					</view>
					<view class="active-rule envelope">
						<image src="/static/img/red envelope.png"></image>
					</view>
					<view class="my-prize item" @click="openPrize">
						<image src="/static/img/my-prize.png"></image>
					</view>
				</view>
			</view>
			<!-- 排行 -->
			<view class="ranking">
				<view class="box">
					<view class="domain">
						<view class="nav">
							<view class="radius" :style="{color: 0 === index ? '#fff': ''}" @click="changeIndex(0)">
								<a>最新</a>
							</view>
							<view class="radius" :style="{color: 1 === index ? '#fff': ''}" @click="changeIndex(1)">
								<a>排行</a>
							</view>
							<view class="tab" :style="{left: index * 168 + 'rpx'}"></view>
						</view>
						<view class="search">
							<input class="input" />
							<uni-icons type="search" size="20"></uni-icons>
						</view>
					</view>
					<view class="content">
						<scroll-view style="height: 100%;" scroll-y="true">
							<view class="sentence" v-for="item in Array(15)" :key="item">
								<view class="phrase">
									少年何妨梦摘星，敢挽桑弓射玉衡
								</view>
								<view class="vote">
									<image mode="heightFix" style="height: 100%;" src="/static/img/vote.png"></image>
								</view>
							</view>		
						</scroll-view>
					</view>
				</view>
			</view>
			<!-- 提交 -->
			<view class="submit">
				<view class="box">
					<view class="content">
						<input />
						<view class="btn">
							提交
						</view>
					</view>
				</view>
			</view>
		</view>
		<tips-com ref=tipsRef></tips-com>
		<rule-com ref="ruleRef"></rule-com>
		<prize-com ref="prizeRef"></prize-com>
	</view>
</template>

<script>
	import tipsCom from './tips.vue'
	import ruleCom from './rule.vue'
	import prizeCom from './prize.vue'
	export default {
		components: {
			tipsCom,
			ruleCom,
			prizeCom
		},
		data() {
			return {
				title: 'Hello',
				index: 0
			}
		},
		onLoad() {

		},
		methods: {
			changeIndex(index){
				this.index = index
			},
			openRule(){
				this.$refs.ruleRef.open()
			},
			openPrize(){
				this.$refs.prizeRef.open()
			}
		}
	}
</script>

<style lang="scss">
	
</style>
